<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<!-- 清除缓存 -->
		<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<meta http-equiv="expires" content="0"/>

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0" >
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>首页</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" >
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			body {
				background: url(img/bg.png) no-repeat center 0;
			}

			.content-wrapper {
				display: flex;
				padding-top: 1.28rem;
				flex-direction: column;
				align-items: center;
			}
			.logo {
				width: 2.8rem;
				height: 2.8rem;
			}
			.title {
				font-size:0.44rem;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color: #FFFFFF;
				line-height:0.68rem;
				text-align: center;
			}
			.check {
				width:4.80rem;
				height:0.88rem;
				margin-top: 12vh;
				background:rgba(255,255,255,1);
				border-radius:0.44rem;
				text-align: center;
				font-size:0.34rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(47,78,184,1);
				line-height: 0.88rem;
			}

			.system {
				width:4.80rem;
				height:0.40rem;
				margin-top: 0.4rem;
				border-radius:0.44rem;
				text-align: center;
				font-family:PingFangSC-Regular,PingFang SC;
				font-size:0.28rem;
				font-weight:400;
				color:rgba(255,255,255,1);
				line-height: 0.40rem;
			}

			.bottom-wrapper {
				margin-top: 20vh;
				margin-bottom: 0.64rem;
				height: 0.4rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				font-size:0.28rem;
				display: flex;
				align-items: center;
			}

			.bottom-btn {
				text-align: center;
				line-height: 0.4rem;
			}
			.bottom-line {
				margin:0.05rem 0.48rem;
				width: 0.02rem;
				height: 0.30rem;
				background-color: #FFFFFF;
			}

			.modal {
				width:100%;
				height:100%;
				background:rgba(0,0,0,0.5);
				display: none;
				justify-content: center;
				align-items: center;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				position: fixed;
				z-index: 1100;
			}

			.modal.show {
				display: flex;
			}

			.login {
				width: 80%;
				background-color: #FFFFFF;
				padding: 0.48rem;
				position: relative;
				display: flex;
				flex-direction: column;
				border-radius: 0.08rem;
			}
			.close {
				width: 0.21rem;
				height: 0.21rem;
				color: #979797;
				position: absolute;
				top: 0.22rem;
				right: 0.22rem;
				font-size: 0.22rem;
			}
			.modal-title {
				width: 100%;
				text-align: center;
				height:0.5rem;
				font-size:0.36rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(34,34,34,1);
				padding: 0.1rem;
				line-height:0.5rem;
			}
			input::-webkit-input-placeholder {
				color: #BBBBBB;
				font-size: 0.28rem;
				text-align: left;
			}
			input {
				font-size: 0.28rem;
			}
			.input-phone {
				margin-top: 0.48rem;
				background:rgba(255,255,255,1);
				border-radius:0.08rem;
				height: 0.8rem;
				padding: 0 0.3rem;
				border:1px solid rgba(217,217,217,1);
			}
			.input-auth-wrapper {
				margin-top: 0.430rem;
				height:0.8rem;
				background:rgba(255,255,255,1);
				border-radius:0.08rem;
				border:1px solid rgba(217,217,217,1);
				display: inline-flex;
			}
			.input-auth {
				flex: 1;
				height: 100%;
				padding: 0 0.3rem;
				background: rgba(255,255,255,1);
				border-radius: 0.08rem;
				border: 0;
			}
			.line {
				width:1px;
				height: 0.4rem;
				margin: 0.2rem 0;
				background:rgba(229,229,229,1);
			}
			.auth-btn {
				width:1.6rem;
				height:0.46rem;
				font-size: 0.28rem;
				font-family: PingFangSC-Regular,PingFang SC;
				font-weight: 400;
				color:rgba(21,131,255,1);
				margin: 0.17rem 0.24rem;
				line-height:0.40rem;
				text-align: center;
			}
			.login-bgn {
				margin-top: 0.48rem;
				width: 100%;
				height:0.88rem;
				background: rgba(21,131,255,1);
				border-radius:0.47rem;
				font-size:0.32rem;
				text-align: center;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				line-height:0.88rem;
			}
		</style>
	</head>
	<body>
		<!-- 标题栏 -->
<!-- 		<div class="app-nav">
			<text class="app-nav-title">阜阳市火灾隐患检查系统</text> -->
		</div>
		<!-- 内容 -->
		<div class="content-wrapper">
			<img class="logo" src="img/logo.png" alt="logo"/>

			<span class="title">阜阳市乡镇街道<br/>火灾隐患排查云平台</span>

			<div class="check" >开始检查</div>

			<div class="system" >系统操作说明</div>

			<div class="bottom-wrapper">
				<div >法律法规</div>
				<div class="bottom-line"></div>
				<div >行动说明</div>
			</div>
		</div>
		<!-- 登录弹窗 show -->
		<div class="modal show">
			<div class="login">

				<div class="close">
					<span class="icon-delete"></span>
				</div>

				<text class="modal-title">还没有登录，请先登录</text>
				<input class="input-phone" type="tel" placeholder="请输入手机号" />
				<div class="input-auth-wrapper">
					<input class="input-auth" size="6" placeholder="请输入验证码" />
					<div class="line"></div>
					<text class="auth-btn">获取验证码</text>
				</div>
				<div class="login-bgn">登录</div>
			</div>
		</div>
	</body>
</html>
